<template>
  <div class="card-grid-box flex-column">
    <slot name="header"></slot>
    <ul class="clearfix flex1">
      <li
        :ref="'li'+index"
        v-for="(item,index) in data"
        :key="item.baseId"
        class="fl li-item"
        :style="(itemWidth>0?fixedWidthStyle:(averageStyle + (index%column==column-1?'margin-right:0;':`margin-right:${$px2rem(gutter)};`)))"
      >
        <card-grid-item
          :model="item"
          :danger="danger"
          :actions="actions"
          :selectable="selectable"
          :props="props"
          @select="handleSelect"
          @onActionClick="handleActions"
        >
          <template #body>
            <slot name="body" :row="item"></slot>
          </template>
          <template #action>
            <slot name="action" :row="item"></slot>
          </template>
          <template #status>
            <slot name="status" :row="item"></slot>
          </template>
          <template #description>
            <slot name="description" :row="item"></slot>
          </template>
          <slot :row="item">
          </slot>
        </card-grid-item>
      </li>
    </ul>
  </div>
</template>

<script>

import cardGridItem from '@/components/CardGrid/cardGridItem.vue'

export default {
  name: 'CardGrid',
  components: {
    cardGridItem
  },
  props: {
    props: {
      type: Object,
      default: () => {
        return {
          baseName: 'baseName',
          description: 'description'
        }
      }
    },
    selectable: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    actions: {
      type: Array,
      default: () => {
        return []
      }
    },
    danger: {
      type: Array,
      default: () => {
        return []
      }
    },
    column: {
      type: Number,
      default: 3
    },
    gutter: {
      type: Number,
      default: 20
    },
    itemWidth: {
      type: Number,
      default: 0
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      checkedList: []
    }
  },
  mounted() {
  },
  computed: {
    // 均分宽度
    averageStyle(index) {
      // 容错处理，列数不能为非正数
      let column = this.column <= 0 ? 1 : this.column
      return `width:calc((100% - (${column - 1} * ${this.$px2rem(this.gutter)})) / ${column});` + this.marginStyle
      // return `width:calc(((100% - ${this.$px2rem(this.gutter)}) / ${column}) - ${this.$px2rem(this.gutter)});` + this.marginStyle
      // return `width: calc(${1 / column * 100}% - ${this.gutter / 14}rem);` + this.marginStyle
    },
    // 固定宽度
    fixedWidthStyle(index) {
      return `width: ${this.$px2rem(this.itemWidth)};` + this.marginStyle
    },
    marginStyle(index) {
      return `margin:${this.$px2rem(this.gutter / 2)} ${this.$px2rem(this.gutter)} ${this.$px2rem(this.gutter / 2)} 0;`
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val.length == 0) {
          this.checkedList = []
        } else {
          let ids = val.map(item => {
            return item.baseId
          })
          let removeArray = []
          this.checkedList.forEach(item => {
            if (ids.indexOf(item) == -1) {
              removeArray.push(item)
            }
          })
          this.checkedList = this.checkedList.filter(item => !removeArray.includes(item))
        }

        this.$emit('selectionChange', this.checkedList)
      },
      deep: true
    }
  },
  methods: {
    handleSelect(itemId, checked) {
      if (this.multiple) {
        let index = this.checkedList.indexOf(itemId)
        // 多选
        if (index == -1) {
          this.checkedList.push(itemId)
        } else {
          this.checkedList.splice(index, 1)
        }
      } else {
        // 单选
        // this.data.forEach(item => {
        //   item.checked = false
        // })
        // model.checked = checked
        if (checked) {
          this.checkedList = [itemId]
        } else {
          this.checkedList = []
        }
      }
      console.log(this.checkedList)
      this.$emit('selectionChange', this.checkedList)
    },
    handleActions(item, index) {
      this.$emit('actionClick', item, index)
    },
    checkedValue() {
      return this.checkedList
    }
  }
}
</script>

<style scoped lang="scss">

.card-grid-box {
  background-color: #FFFFFF;

  .li-item {
    transition: 0.3s;

    &:hover {
      //transform: scale(1.05, 1.05);
    }
  }
}

</style>
